/**
 * 路由基本使用
 * 步骤：
 * 1. 安装：npm i react-router-dom
 * 2. 导入路由的三个核心组件：Router / Route / Link
 * 3. 使用Router组件包裹根组件App=>整个应用
 * 4. 使用Route组件配置路由规则
 * 5. 使用Link组件导航路由
 */
import React, { Component } from 'react'
import './index.css'
// 导入配置路由的三个核心组件
import { BrowserRouter as Router, Route, Link, Switch, Redirect, withRouter } from 'react-router-dom'
import Login from './login'
// 导入组件

// 首页
// 子组件
const Fnc = (props) => {
  console.log(props)
  return (
    <h2>我是首页的子组件</h2>
  )
}

const Fnx = (props) => {
  console.log('Fnx', props)
  return (
    <div>
      <h2>我是Fnx组件</h2>
    </div>
  )
}

const NewFnx = withRouter(Fnx)
class Home extends Component {

  componentDidMount () {
    console.log('获取传递的参数', this.props.location)
  }


  render () {
    return (
      <div>
        <h1>首页</h1>
        <button onClick={
          () => {
            this.props.history.goBack()
            // go方法：传0/空 => 刷新页面
            // this.props.history.go(2)
          }
        }>编程式导航</button>
        <hr />
        <Fnc {...this.props} />
        <hr />
        <NewFnx />
      </div>
    )
  }
}

// 关于我们二级路由组件
const AboutTwo = () => {
  return (
    <div>
      <h2>我是about的二级路由</h2>
    </div>
  )
}

// 关于我们
const About = (props) => {
  console.log(props)
  return (
    <div>
      <h1>关于我们</h1>
      <button onClick={() => {
        props.history.push('/')
      }}>跳路由</button>
      <p><Link to="/about/two">关于我们二级路由</Link></p>
      <Route path="/about/two" component={AboutTwo} />
    </div>
  )
}

// 新闻中心
class News extends Component {

  componentDidMount () {
    // 获取动态路由参数
    console.log(this.props.match.params)
  }


  render () {

    return (
      <div>
        <h1>新闻</h1>
      </div>
    )
  }
}


// 联系我们
const Contact = () => {

  return (
    <div>
      <h1>联系我们</h1>
    </div>
  )
}

// 404组件
const NotFound = () => {
  return (
    <div>
      <h1 className="red">
        <Link to="/home">迷路了吗？带你回家！</Link>
      </h1>
    </div>
  )
}

// 封装Auth组件：路由守卫
const Auth = ({ path, component: Com }) => {
  return <Route path={path} render={(props) => {
    // console.log(props)=>能干路由守卫？
    const token = localStorage.getItem('token')
    if (token) {
      return <Com {...props} />
    } else {
      // 跳转到登录
      return <Redirect to="/login" />
    }

  }} />
}

// 配置
const RouteConfig = [
  {
    path: '/login',
    component: Login,
    isAuth: false
  },
  {
    path: '/about',
    component: About
  }
]

// 根组件
const App = () => {
  // 模版
  return (
    <Router>
      <nav className="menu">
        <Link to="/home">首页</Link>
        <Link to="/about">关于我们</Link>
        <Link to="/news/123/name">新闻</Link>
        <Link to="/contact">联系我们</Link>
      </nav>
      {/* 配置路由规则=>一级路由 */}
      <Switch>
        {/* 路由重定向 */}
        <Redirect exact from="/" to="/home" />
        {/* 首页 */}
        {/* <Route path="/home" component={Home} /> */}
        <Auth path="/home" component={Home} />
        {/* <Route path="/home" render={(props) => {
          // console.log(props)=>能干路由守卫？
          const token = 0
          if (token) {
            return <Home {...props} />
          } else {
            // 调转到登录
            return <Redirect to="/login" />
          }

        }} /> */}
        {
          RouteConfig.map((item, i) => <Route key={i} path={item.path} component={item.component} />)
        }
        {/* 登录 */}
        {/* <Route path="/login" component={Login} /> */}
        {/* 关于我们 */}
        {/* <Route path="/about" component={About} /> */}
        {/* <Route path="/contact" component={Contact} /> */}
        <Auth path="/contact" component={Contact} />
        {/* 动态路由=>详情 */}
        <Route path="/news/:id/:name" component={News} />
        {/* 404页面 */}
        <Route component={NotFound} />
      </Switch>
    </Router>
  )
}

export default App